<template>
  <div class="row justify-content-center">
    <div class="col-8">
      <form name="editForm" role="form" novalidate v-on:submit.prevent="save()">
        <h2 id="roomAdminApp.roomBasicProperty.home.createOrEditLabel" data-cy="RoomBasicPropertyCreateUpdateHeading">
          Create or edit a RoomBasicProperty
        </h2>
        <div>
          <div class="form-group" v-if="roomBasicProperty.id">
            <label for="id">ID</label>
            <input type="text" class="form-control" id="id" name="id" v-model="roomBasicProperty.id" readonly />
          </div>
          <div class="form-group">
            <label class="form-control-label" for="room-basic-property-houseType">House Type</label>
            <input
              type="text"
              class="form-control"
              name="houseType"
              id="room-basic-property-houseType"
              data-cy="houseType"
              :class="{ valid: !$v.roomBasicProperty.houseType.$invalid, invalid: $v.roomBasicProperty.houseType.$invalid }"
              v-model="$v.roomBasicProperty.houseType.$model"
            />
            <div v-if="$v.roomBasicProperty.houseType.$anyDirty && $v.roomBasicProperty.houseType.$invalid">
              <small class="form-text text-danger" v-if="!$v.roomBasicProperty.houseType.maxLength">
                This field cannot be longer than 32 characters.
              </small>
            </div>
          </div>
          <div class="form-group">
            <label class="form-control-label" for="room-basic-property-buildingSize">Building Size</label>
            <input
              type="text"
              class="form-control"
              name="buildingSize"
              id="room-basic-property-buildingSize"
              data-cy="buildingSize"
              :class="{ valid: !$v.roomBasicProperty.buildingSize.$invalid, invalid: $v.roomBasicProperty.buildingSize.$invalid }"
              v-model="$v.roomBasicProperty.buildingSize.$model"
            />
            <div v-if="$v.roomBasicProperty.buildingSize.$anyDirty && $v.roomBasicProperty.buildingSize.$invalid">
              <small class="form-text text-danger" v-if="!$v.roomBasicProperty.buildingSize.maxLength">
                This field cannot be longer than 32 characters.
              </small>
            </div>
          </div>
          <div class="form-group">
            <label class="form-control-label" for="room-basic-property-structure">Structure</label>
            <input
              type="text"
              class="form-control"
              name="structure"
              id="room-basic-property-structure"
              data-cy="structure"
              :class="{ valid: !$v.roomBasicProperty.structure.$invalid, invalid: $v.roomBasicProperty.structure.$invalid }"
              v-model="$v.roomBasicProperty.structure.$model"
            />
            <div v-if="$v.roomBasicProperty.structure.$anyDirty && $v.roomBasicProperty.structure.$invalid">
              <small class="form-text text-danger" v-if="!$v.roomBasicProperty.structure.maxLength">
                This field cannot be longer than 16 characters.
              </small>
            </div>
          </div>
          <div class="form-group">
            <label class="form-control-label" for="room-basic-property-roomFloor">Room Floor</label>
            <input
              type="text"
              class="form-control"
              name="roomFloor"
              id="room-basic-property-roomFloor"
              data-cy="roomFloor"
              :class="{ valid: !$v.roomBasicProperty.roomFloor.$invalid, invalid: $v.roomBasicProperty.roomFloor.$invalid }"
              v-model="$v.roomBasicProperty.roomFloor.$model"
            />
            <div v-if="$v.roomBasicProperty.roomFloor.$anyDirty && $v.roomBasicProperty.roomFloor.$invalid">
              <small class="form-text text-danger" v-if="!$v.roomBasicProperty.roomFloor.maxLength">
                This field cannot be longer than 32 characters.
              </small>
            </div>
          </div>
          <div class="form-group">
            <label class="form-control-label" for="room-basic-property-buildingType">Building Type</label>
            <input
              type="text"
              class="form-control"
              name="buildingType"
              id="room-basic-property-buildingType"
              data-cy="buildingType"
              :class="{ valid: !$v.roomBasicProperty.buildingType.$invalid, invalid: $v.roomBasicProperty.buildingType.$invalid }"
              v-model="$v.roomBasicProperty.buildingType.$model"
            />
            <div v-if="$v.roomBasicProperty.buildingType.$anyDirty && $v.roomBasicProperty.buildingType.$invalid">
              <small class="form-text text-danger" v-if="!$v.roomBasicProperty.buildingType.maxLength">
                This field cannot be longer than 32 characters.
              </small>
            </div>
          </div>
          <div class="form-group">
            <label class="form-control-label" for="room-basic-property-ladderHouseHold">Ladder House Hold</label>
            <input
              type="text"
              class="form-control"
              name="ladderHouseHold"
              id="room-basic-property-ladderHouseHold"
              data-cy="ladderHouseHold"
              :class="{ valid: !$v.roomBasicProperty.ladderHouseHold.$invalid, invalid: $v.roomBasicProperty.ladderHouseHold.$invalid }"
              v-model="$v.roomBasicProperty.ladderHouseHold.$model"
            />
            <div v-if="$v.roomBasicProperty.ladderHouseHold.$anyDirty && $v.roomBasicProperty.ladderHouseHold.$invalid">
              <small class="form-text text-danger" v-if="!$v.roomBasicProperty.ladderHouseHold.maxLength">
                This field cannot be longer than 16 characters.
              </small>
            </div>
          </div>
          <div class="form-group">
            <label class="form-control-label" for="room-basic-property-floorStructure">Floor Structure</label>
            <input
              type="text"
              class="form-control"
              name="floorStructure"
              id="room-basic-property-floorStructure"
              data-cy="floorStructure"
              :class="{ valid: !$v.roomBasicProperty.floorStructure.$invalid, invalid: $v.roomBasicProperty.floorStructure.$invalid }"
              v-model="$v.roomBasicProperty.floorStructure.$model"
            />
            <div v-if="$v.roomBasicProperty.floorStructure.$anyDirty && $v.roomBasicProperty.floorStructure.$invalid">
              <small class="form-text text-danger" v-if="!$v.roomBasicProperty.floorStructure.maxLength">
                This field cannot be longer than 16 characters.
              </small>
            </div>
          </div>
          <div class="form-group">
            <label class="form-control-label" for="room-basic-property-roomTowards">Room Towards</label>
            <input
              type="text"
              class="form-control"
              name="roomTowards"
              id="room-basic-property-roomTowards"
              data-cy="roomTowards"
              :class="{ valid: !$v.roomBasicProperty.roomTowards.$invalid, invalid: $v.roomBasicProperty.roomTowards.$invalid }"
              v-model="$v.roomBasicProperty.roomTowards.$model"
            />
            <div v-if="$v.roomBasicProperty.roomTowards.$anyDirty && $v.roomBasicProperty.roomTowards.$invalid">
              <small class="form-text text-danger" v-if="!$v.roomBasicProperty.roomTowards.maxLength">
                This field cannot be longer than 8 characters.
              </small>
            </div>
          </div>
          <div class="form-group">
            <label class="form-control-label" for="room-basic-property-roomFitment">Room Fitment</label>
            <input
              type="text"
              class="form-control"
              name="roomFitment"
              id="room-basic-property-roomFitment"
              data-cy="roomFitment"
              :class="{ valid: !$v.roomBasicProperty.roomFitment.$invalid, invalid: $v.roomBasicProperty.roomFitment.$invalid }"
              v-model="$v.roomBasicProperty.roomFitment.$model"
            />
            <div v-if="$v.roomBasicProperty.roomFitment.$anyDirty && $v.roomBasicProperty.roomFitment.$invalid">
              <small class="form-text text-danger" v-if="!$v.roomBasicProperty.roomFitment.maxLength">
                This field cannot be longer than 8 characters.
              </small>
            </div>
          </div>
          <div class="form-group">
            <label class="form-control-label" for="room-basic-property-ladderHouseholds">Ladder Households</label>
            <input
              type="text"
              class="form-control"
              name="ladderHouseholds"
              id="room-basic-property-ladderHouseholds"
              data-cy="ladderHouseholds"
              :class="{ valid: !$v.roomBasicProperty.ladderHouseholds.$invalid, invalid: $v.roomBasicProperty.ladderHouseholds.$invalid }"
              v-model="$v.roomBasicProperty.ladderHouseholds.$model"
            />
            <div v-if="$v.roomBasicProperty.ladderHouseholds.$anyDirty && $v.roomBasicProperty.ladderHouseholds.$invalid">
              <small class="form-text text-danger" v-if="!$v.roomBasicProperty.ladderHouseholds.maxLength">
                This field cannot be longer than 16 characters.
              </small>
            </div>
          </div>
          <div class="form-group">
            <label class="form-control-label" for="room-basic-property-lift">Lift</label>
            <input
              type="checkbox"
              class="form-check"
              name="lift"
              id="room-basic-property-lift"
              data-cy="lift"
              :class="{ valid: !$v.roomBasicProperty.lift.$invalid, invalid: $v.roomBasicProperty.lift.$invalid }"
              v-model="$v.roomBasicProperty.lift.$model"
            />
          </div>
        </div>
        <div>
          <button type="button" id="cancel-save" data-cy="entityCreateCancelButton" class="btn btn-secondary" v-on:click="previousState()">
            <font-awesome-icon icon="ban"></font-awesome-icon>&nbsp;<span>Cancel</span>
          </button>
          <button
            type="submit"
            id="save-entity"
            data-cy="entityCreateSaveButton"
            :disabled="$v.roomBasicProperty.$invalid || isSaving"
            class="btn btn-primary"
          >
            <font-awesome-icon icon="save"></font-awesome-icon>&nbsp;<span>Save</span>
          </button>
        </div>
      </form>
    </div>
  </div>
</template>
<script lang="ts" src="./room-basic-property-update.component.ts"></script>
